<!-- loading组件 -->
<template>
  <div class="circle-container">
    <svg width="200" height="180" viewBox="0 0 500 500">
      <circle cx="250" cy="250" r="100" stroke-width="5" stroke="#87CEEB" fill="none"
              stroke-dasharray = "157"
              stroke-linecap="round"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          from="0 250 250"
          to="360 250 250"
          dur="1s"
          repeatCount="indefinite"
        >
        </animateTransform>
        <animate
          attributeName="stroke"
          from="#87CEEB"
          to="blue"
          dur="1s"
          repeatCount="indefinite"
        ></animate>
      </circle>
      <circle cx="250" cy="250" r="60" stroke-width="5" stroke="#00FF00" fill="none"
               stroke-dasharray = "94"
                stroke-linecap="round"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          from="360 250 250"
          to="0 250 250"
          dur="1s"
          repeatCount="indefinite"
        >
        </animateTransform>
        <animate
          attributeName="stroke"
          from="#00FF00"
          to="green"
          dur="1s"
          repeatCount="indefinite"
        ></animate>
      </circle>
    </svg>
    <!--  文字提示  -->
    <div class="title">
      <slot>数据加载中...</slot>
    </div>
  </div>
</template>

<script setup lang="ts">
  /*
    * 组件可定制化参数:
      1. width
      2. height
      3. 颜色
      4. 圆半径
      5. 底部提示文字
  */
</script>

<style lang="less" scoped>
  .circle-container {
    width: 200px;
    margin: 0 auto;
    text-align: center;
  }
</style>